<template>
  <div class="popular-wrap gap-row-32">
    <div v-if="isDesktop && ad[0]" class="banner-wrap">
      <Banner :item="ad[0]" size="long"></Banner>
    </div>
    <div class="popular-list" @scroll="onScroll">
      <div v-for="item in items" class="item pointer mb-4" :key="item.hot_date" @click="$emit('pick', item.hot_date)">
        <div class="images">
          <EncryptImage
            v-for="image in item.images"
            class="image"
            :src="image.img_path"
            :key="image.img_path"
            :border-radius="10"
            object-fit="cover"
          ></EncryptImage>
        </div>
        <div class="title font-size-14 font-weight-500 line-height-140 text-center">{{ makeTitle(item.hot_date) }}</div>
      </div>
    </div>
    <div v-if="isDesktop && ad[1]" class="banner-wrap">
      <Banner :item="ad[1]" size="long"></Banner>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { $t } from '@/i18n'
import Banner from '@/components/banner/Banner.vue'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'
import API from '@/http'

defineProps({
  items: { type: Array, required: true },
})

const emits = defineEmits(['pick', 'intersect'])

const appStore = useAppStore()
const { isDesktop } = storeToRefs(appStore)

function makeTitle(hotDate) {
  const year = hotDate.substring(0, 4)
  const month = hotDate.substring(4)
  return $t('title.popularSetName', { year, month })
}

let isScrollToBottom = false
function onScroll({ target: { scrollTop, scrollHeight, clientHeight } }) {
  if (scrollHeight - scrollTop - clientHeight < 10) {
    if (!isScrollToBottom) {
      isScrollToBottom = true
      emits('intersect')
    }
  } else {
    isScrollToBottom = false
  }
}

const ad = ref([])
API.App.getAd({ data: { type: 1 } }).then((d) => (ad.value = d))
</script>

<style lang="scss" scoped>
.popular-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;

  .banner-wrap {
    width: 10rem;
    height: 37.5rem;
    padding-top: 5.625rem;
  }
}
.popular-list {
  width: 100%;
  height: 100%;
  padding: 4.375rem 1rem 4.625rem; // 4.375rem: 置頂head(3.5rem) + 0.875rem; 4.625rem: 至底nav
  overflow: auto;

  .item {
    width: 100%;
    height: calc((100vw - 2rem) * 140 / 343);
    border-radius: 0 0 0.635rem 0.625rem;
    position: relative;

    .images {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      perspective: 100px;

      .image {
        width: calc(100% * 73 / 343);
        height: calc(100% * 130 / 140);
        box-shadow: 0rem 0.3125rem 0.625rem rgba(16, 16, 20, 0.8);
        position: absolute;
        bottom: 0;
      }

      .image:nth-child(1) {
        left: 0;
        transform: rotateY(23deg);
        transform-origin: center left;
      }
      .image:nth-child(2) {
        left: calc(100% * 63 / 343);
        transform: rotateY(23deg);
        transform-origin: center left;
      }
      .image:nth-child(3) {
        width: calc(100% * 91 / 343);
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
      }
      .image:nth-child(4) {
        right: calc(100% * 63 / 343);
        transform: rotateY(-23deg);
        transform-origin: center right;
      }
      .image:nth-child(5) {
        right: 0;
        transform: rotateY(-23deg);
        transform-origin: center right;
      }
    }

    .title {
      width: 100%;
      height: calc((100vw - 2rem) * 28 / 343);
      padding: 0.25rem 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(249, 94, 14, 0.7) -40%, rgba(231, 23, 179, 0.7) 112.5%);
      box-shadow: 0px 0px 7px 0px rgba(255, 15, 0, 0.68);
      text-shadow: 0rem 0rem 0.4375rem rgba(255, 15, 0, 0.68);
      position: absolute;
      bottom: 0;
    }
  }
}

.desktop {
  .popular-list {
    width: 42.625rem;
    padding-top: 5.625rem;

    .item {
      height: 17.3125rem;
    }

    .title {
      height: 2.375rem;
      font-size: 1.125rem;
    }
  }
}
</style>
